<template>
  <div>
    <BasePage>
      <el-card>
        <el-table :data="taskList" border stripe>
          <el-table-column
            prop="task_id"
            label="任务ID"
            width="300px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="url"
            label="目标地址"
            width="300px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="params"
            label="参数"
            width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="job_cron" label="执行时间" width="160px"></el-table-column>
          <el-table-column prop="trigger" label="任务类型" width="80px"></el-table-column>
          <el-table-column prop="job_status" label="任务状态" width="80px">
            <template scope="scope">
              <el-switch
                active-color="#ff4949"
                v-model="scope.row.job_status"
                @change="changeStatus(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120px">
            <template scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editTask(scope.row.id)"
              ></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </BasePage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      taskList: []
    }
  },
  created() {
    this.getTaskList()
  },
  methods: {
    getTaskList() {
      this.$http
        .get('/job/list')
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.taskList = resData.data.list
          } else {
            return this.$message.msg(resData.msg)
          }
        })
        .catch(err => {
          this.$message.error(err)
        })
    },
    editTask(id) {
      console.log(id)
    },
    changeStatus(info) {
      this.$http
        .post('/core/api/case/changeStatus', { id: info.case_id })
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.$message.success(resData.msg)
          } else {
            info.status = !info.status
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          info.status = !info.status
          return this.$message.error(err)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
